import React from 'react'
import ReactEcharts from 'echarts-for-react';
// import ReactEchartsCore from 'echarts-for-react/lib/core';
// import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/bar';
class Graph extends React.Component {
    componentWillMount = () => {}
    constructor(props) {
        super(props)
        this.state = {}
    }
    config = {
        key: 's_department_flood_info', //数据来源
        firstTreeClick: (params) => {
            this.props.onChange && (this.props.onChange({dep_type: params.data.dep_type, id: params.data.id, name: params.data.name, origin_id: params.data.origin_id, pid: params.data.pid}))
        },
        secTreeClick: (params) => {
            this.props.onChange && (this.props.onChange({dep_type: params.data.dep_type, id: params.data.id, name: params.data.name, origin_id: params.data.origin_id, pid: params.data.pid}))
        }
    }
    info = {
        boxW: 300,
        boxH: 200,
        nodesShow: [], //节点
        linkNodes: [], //线的节点
        linkDatas: [], //线的数据
        nodesShowC: [], //子节点显示的块
        linkNodesC: [], //子节点 线的nodes
        linkDatasC: [], //子节点 线的头尾
        linkNodesCL: 100, //组件距离左边的px
        linkNodesCR: 100, //组件距离右边的px
        childrenShow: false,
        hasChildIndex: 0, //有子节点的索引
        hasChildDa: [], //有子节点的那一行数据（子节点父级的数据）
        w: 100,
        h: 30,
        symw: 10, //子节点的图标大小
        losition: {
            firstS: [100],
            twoS: [100],
            threeS: [100],
            distance: 50, //垂直20px间距
        }
    }
    boxWC = 0;
    boxHC = 200;
    myChart = {};
    componentDidMount = () => {
        if (this.props.config !== undefined) 
            this.config = Object.assign(this.config, this.props.config);
        this.myChart = this.echarts_react.getEchartsInstance();
        let secTreeC = this.childrenTree.getEchartsInstance();
        this.getData();
        let that = this;
        let flag = true;
        this.myChart.on('click', (params) => { //一级 二级
                if (params.data.nextFlagS) { //加号点击
                    if (flag) {
                        flag = false;
                        that.info.childrenShow = true;
                    } else {
                        that.info.childrenShow = false;
                        flag = true;
                    }
                    that.setState({})
                } else {
                    //弹窗
                    that.config.firstTreeClick(params)
                }
            });
        secTreeC.on('click', (params) => { //三级
            if (params.data.nextFlagS) { //加号点击
                if (flag) {
                    flag = false;
                    that.info.childrenShow = true;
                } else {
                    that.info.childrenShow = false;
                    flag = true;
                }
                that.setState({})
            } else {
                //弹窗
                that.config.secTreeClick(params)
            }
        });

    }

    proDataFn = (data) => { //数据处理程树结构
        let temp = [];          
                    let xSpacing =40;//间距   
        let firstindex = 0,  twoindex = 0,   thirindex = 0; 
        let xStart_1=100,xStart_2=100,xStart_3=100,yDistance=100;
        data.map((item, i) => { //第一级
            let fdata = item;
            let firstindex = 0;
            data.map((jtem, j) => {
                if (fdata.pid == jtem.id) {} else {
                    firstindex++;
                    if (firstindex == data.length) { 
                        fdata.key = i + '';
                        temp.push(fdata);
                    }
                }
            })
        })
 
        temp.map((ztem, z) => {
            ztem.data = [];
            ztem.x = xStart_1;
            ztem.y =  this.info.h+yDistance;  
            ztem.nextFlag = true;
            ztem.label={
                normal: {
                    show: true, 
                    position: 'inside',  
                    formatter: function(params) {
                        return '{popup|'+params.data.name+'}'
                    },
                    color: '#fff', 
                    rich: {
                        popup: {
                                align: 'center', color: '#fff',     backgroundColor: '#67D958',   width:this.info.w, height:this.info.h,     padding: [10,0],
                        }
                    },
                }
            }; 
            switch(ztem.status){
                case 1://无应急
                ztem.label.normal.rich.popup.backgroundColor='#908B8B';
                break;
                    case 2://已接收
                ztem.label.normal.rich.popup.backgroundColor='#67D958';
                break;
                    case 3://已反馈
                ztem.label.normal.rich.popup.backgroundColor='#FFBB38';
                break;
            }

            data.map((jtem, j) => {
                if (ztem.id == jtem.pid) { //第二级 
                    jtem.key = z + '-' + j;
                    jtem.x = xStart_2;
                    jtem.y =  this.info.h*2+yDistance;  
                    jtem.label={
                        normal: {
                            show: true, 
                            position: 'inside',  
                            formatter: function(params) {
                                return '{popup|'+params.data.name+'}'
                            },
                            color: '#fff', 
                            rich: {
                                popup: {
                                        align: 'center', color: '#fff',     backgroundColor: '#67D958',  width:this.info.w, height:this.info.h,   padding: [10,0],
                                }
                            },
                        },
                    }
                    switch(jtem.status){
                        case 1://无应急
                        jtem.label.normal.rich.popup.backgroundColor='#908B8B';
                        break;
                            case 2://已接收
                        jtem.label.normal.rich.popup.backgroundColor='#67D958';
                        break;
                            case 3://已反馈
                        jtem.label.normal.rich.popup.backgroundColor='#FFBB38';
                        break;
                    }
                    ztem.data.push(jtem);
                    xStart_2 =xStart_2+this.info.w+xSpacing;  
                }
            })
        })
  
        temp.map((ztem, z) => { 
            if (ztem.data) {
                ztem.data.map((ktem, k) => {
                        let hasC = 0;
                        data.map((ntem, h) => {
                            if (ktem.id == ntem.pid) { //第三级
                                hasC++;
                                if (hasC == 1) {
                                    ktem.data = [];
                                    ktem.nextFlag=true; 
                                } 
                                ntem.key = z + '-' + k + '-' + h; 
                                ntem.x = xStart_3;
                                ntem.y =  this.info.h+yDistance;  
                                ntem.label={
                                    normal: {
                                        show: true, 
                                        position: 'inside',  
                                        formatter: function(params) {
                                            return '{popup|'+params.data.name+'}'
                                        },
                                        color: '#fff', 
                                        rich: {
                                            popup: {
                                                    align: 'center', color: '#fff',     backgroundColor: '#67D958', width:this.info.w, height:this.info.h,       padding: [10,0],
                                            }
                                        },
                                    },
                                }
                                switch(ntem.status){
                                    case 1://无应急
                                    ntem.label.normal.rich.popup.backgroundColor='#908B8B';
                                    break;
                                        case 2://已接收
                                    ntem.label.normal.rich.popup.backgroundColor='#67D958';
                                    break;
                                        case 3://已反馈
                                    ntem.label.normal.rich.popup.backgroundColor='#FFBB38';
                                    break;
                                }
                                ktem.data.push(ntem)
                                xStart_3 = xStart_3+this.info.w+xSpacing;       

                            } else {}
                        })
                    })
            }
        }) 

        this.linkProFn(temp) 
    }


    linkProFn = (proD) => {
         let linkTemp = []; //线的头尾
         let linkNodesTemp = []; //线的点
         let oldNode = '';
         let  yDistance=100;
         let oldNodeC = '';
         this.info.nodesShow=[];      
         this.info.boxH = this.info.h*3+yDistance+25;//20是蓝色球的大小
        let w = this.info.w , h =this.info.h; 
        
        proD.map((item, i) => {
            this.info.boxW =item.w;   
            this.info.nodesShow.push({
                y: item.y,
                x: item.x,
                name: item.name,
                w: w,
                h: h, 
                label: item.label, 
                symbolSize:  [w,h+20]
            })  ;  
            linkNodesTemp.push({
                y: item.y,
                x: item.x,
                name: item.name,
                w: w,
                h: h,
            });
            if (item.data) {
                item.data.map((jtem, i) => { //第二级
                    this.info.boxW =  jtem.x;   
                    this.info.nodesShow.push({
                            y: jtem.y,
                            x: jtem.x,
                            w: w,
                            h: h,
                             label: jtem.label, 
                            name: jtem.name,            
                            symbolSize:  [w,h+20]
                    })  ; 

                    linkNodesTemp.push({//midnode
                        y: jtem.y - yDistance - this.info.h,
                        x: jtem.x,
                        w: w,
                        h: h,
                        name: jtem.name + '_s', 
                        symbolSize: 2
                    });
                    linkTemp.push({ //连接线的头尾
                        source: jtem.name + '_s',
                        target: jtem.name + '_e'
                    })
                    if (jtem.name.indexOf('_s') < 0) {
                        linkTemp.push({ //连接线的头尾
                            source: jtem.name + '_s',
                            target: oldNode
                        })
                    }
                    oldNode = jtem.name + '_s';

                    // if(i==6){//有下一级
                    if (jtem.nextFlag) { //有下一级 
                        this.info.hasChildIndex = i;
                        this.info.hasChildDa = item.data;
                        linkNodesTemp.push({
                            y: jtem.y,
                            x: jtem.x,
                            w: w,
                            h: h,
                            name: jtem.name + '_e',
                            symbol: 'image://./assets/icon_circle.png',
                            symbolSize:10,
                            symbolOffset: [0, 25],
                            nextFlagS:true, 
                        }); 
                    }else{
                        linkNodesTemp.push({
                            y: jtem.y,
                            x: jtem.x,
                            w: w,
                            h: h,
                            name: jtem.name + '_e', 
                            symbolSize: 0
                        }); 
                    }

                    if (jtem.data && jtem.data.length > 0) { //第三极
                        this.boxHC = this.info.h * 3 / 2 + this.info.losition.distance;
                        let dis = 90; // dis是两点间的宽度 ,w是块的大小
                        this.boxWC = this.info.losition.threeS[0] * 2 + this.info.symw * jtem.data.length + dis * (jtem.data.length - 1);
                        //第二级连接第三级的垂直线 
                        if (this.info.hasChildIndex == 0) {
                            this.info.linkNodesC.push({
                                    y: 0, x: jtem.data[0].x,
                                    // x:  this.info.linkNodesCL,
                                    symbolSize: 2,
                                    name: 'twoLs'
                                }, {
                                    y: jtem.data[0].y - this.info.losition.distance,
                                    x: jtem.data[0].x,
                                    // x: this.info.linkNodesCL,
                                    symbolSize: 2,
                                    name: 'twoLe'
                                })
                            // this.info.linkNodesCL =100;
                        } else if (this.info.hasChildIndex > 0 && this.info.hasChildIndex < this.info.hasChildDa.length - 1) {
                            this.info.linkNodesC.push({
                                    y: 0,
                                    x: this.boxWC / 2,
                                    // x:  this.boxWC /2+this.info.symw/
                                    // jtem.data.length*(this.info.hasChildIndex+1),
                                    symbolSize: 2,
                                    name: 'twoLs'
                                }, {
                                    y: jtem.data[0].y - this.info.losition.distance,
                                    x: this.boxWC / 2,
                                    // x:  this.boxWC/2+this.info.symw/
                                    // jtem.data.length*(this.info.hasChildIndex+1),
                                    symbolSize: 2,
                                    name: 'twoLe'
                                })
                            // this.info.linkNodesCL =100;
                        } else {
                            this.info.linkNodesC.push({
                                    y: 0,
                                    x: jtem.data[jtem.data.length - 1].x - this.info.symw,
                                    // x:  this.boxWC  -this.info.losition.twoS[0]+this.info.symw ,
                                    symbolSize: 2,
                                    name: 'twoLs'
                                }, {
                                    y: jtem.data[0].y - this.info.losition.distance,
                                    x: jtem.data[jtem.data.length - 1].x - this.info.symw,
                                    // x:  this.boxWC-this.info.losition.twoS[0]+this.info.symw,
                                    symbolSize: 2,
                                    name: 'twoLe'
                                })
                            // this.info.linkNodesCL =100; this.info.linkNodesCR =100;
                            this.info.linkNodesCR = 100 - this.info.symw;
                        }

                        this.info.linkDatasC.push({source: 'twoLs', target: 'twoLe'})
                        jtem.data.map((ktem, k) => {
                            this.info.linkNodesC.push({
                                    y: ktem.y,
                                    x: ktem.x,
                                    w: ktem.w,
                                    h: ktem.h,
                                    name: ktem.name,
                                    symbolSize: [w,h+20],
                                    label: ktem.label,
                                    dep_type: ktem.dep_type,
                                    cid: ktem.id,
                                    origin_id: ktem.origin_id,
                                    pid: ktem.pid
                                });
                      
                            this.info.linkNodesC.push({
                                y: ktem.y - this.info.losition.distance,
                                symbolSize: 2,
                                x: ktem.x,
                                name: ktem.name + '_s'
                            });
                            this.info.linkDatasC.push({ //连接线的头尾
                                    source:ktem.name+'_s',
                                    target: ktem.name
                                })
                            if (ktem.name.indexOf('_s') < 0) {
                                this.info.linkDatasC.push({source: ktem.name+'_s', target: oldNodeC})
                            }
                            oldNodeC = ktem.name + '_s';

                        })
                    }
                })
            }

        })
        if (this.info.nodesShow.length > 0) { //第一级连接第二级的垂直线
            this.info.nodesShow[0].x = this.info.boxW / 2; //第一级节点的位置重置
            linkNodesTemp[0].x = this.info.boxW / 2;
            linkNodesTemp.push({
                y: linkNodesTemp[0].y + this.info.h,
                symbolSize: 2,
                x: linkNodesTemp[0].x,
                name: 'firstLC'
            })
            linkTemp.push({source: linkNodesTemp[0].name, target: 'firstLC'})
        }

        this.info.linkNodes = linkNodesTemp;
        this.info.linkDatas = linkTemp;
        this.setState({})
        this.myChart.resize();
        this.childrenTree.getEchartsInstance().resize();

    }

    // 数据请求
    getData = () => {
        let that = this;
        T.ajax({
            key: this.config.key,
            data: {},
            success: function success(result) {
                let data = JSON.parse(result).data;
                that.proDataFn(data);
            }
        });
    }
    render() {

        let option = {
            backgroundColor:'pink',
            series: [
                {
                    name: 'pointsData', //点
                    type: 'graph', 
                    silent: false,
                    zlevel: 2,          
                    top:'bottom',
                    symbol: 'rect',
                    right: this.info.losition.twoS[0],
                    left: this.info.losition.twoS[0], //左右边距100
                    data: this.info.nodesShow
                }, {
                    name: 'linksData', //线
                    type: 'graph',
                    silent: false,
                    zlevel: 1,
                    right: this.info.losition.twoS[0],
                    left: this.info.losition.twoS[0], //左右边距100
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#333'
                        }
                    },
                    symbolSize: 5,
                    data: this.info.linkNodes,
                    links: this.info.linkDatas
                }
            ]
        };
        let childrenTreeOp = {
            // backgroundColor:'PINK',
            series: [
                {
                    name: 'linksData', //线
                    type: 'graph',
                    zlevel: 3,
                    symbol: 'rect',
                    top: 'top',
                    right: this.info.linkNodesCR,
                    left: this.info.linkNodesCL,
                    symbolSize: 5,
                    lineStyle: option.series[1].lineStyle,
                    // data: this.info.linkNodesC,
                    // links: this.info.linkDatasC,
                    silent: false
                }
            ]
        };
        let left = 0;
        if (this.info.hasChildIndex == 0) {
            left = 0
        } else if (this.info.hasChildIndex > 0 && this.info.hasChildIndex < this.info.hasChildDa.length - 1) {
            left = this.info.hasChildDa[this.info.hasChildIndex].x - this.boxWC / 2 + this.info.symw
        } else {
            left = this.info.boxW - this.boxWC
        }
        return (
            <div
                className='Graph'
                style={{
                width: this.info.boxW > this.boxWC? this.info.boxW: this.boxWC,
                textAlign: 'right'
            }}>
                <div
                    style={{
                    height: this.info.boxH,
                    width: this.info.boxW,
                    margin: 'auto'
                }}>
                    <ReactEcharts
                        ref=
                        { (e) => {this.echarts_react = e}}
                        option={option}
                        style={{
                        height: this.info.boxH,
                        width: this.info.boxW
                    }}/>
                </div>
                <div
                    style={{
                    display: this.info.childrenShow? 'inline-block': 'none',
                    width: '100%',
                    left: left,
                    position: 'relative'
                }}>
                    <ReactEcharts
                        ref=
                        {(e) => { this.childrenTree = e}}
                        option={childrenTreeOp}
                        style={{
                        height: this.boxHC,
                        width: this.boxWC
                    }}/>
                </div>
            </div>
        )
    }
}
export default Graph